<template>
    <div class="template">
        <div class="temMain">
            <div class="tip1">
                <img :src="CreateRecipe" style="width: 200px;" />
                <div class="topInfo">
                    <van-badge :content="badgeNum" color="#2EAC7F" :show-zero="false">
                        <img :src="home_collect_button" style="width: 38px;height: 38px;" @click="router.push('/myRecipes')"/>
                    </van-badge>
                    <div style="width: 95px;height: 38px;margin-left: 10px;position: relative;" @click="router.push('/store')">
                        <img :src="home_store_button" style="width: 100%;height: 38px;"/>
                        <!-- <div class="coinsNum">{{ coinsNum > 99? '99+' : coinsNum }}</div> -->
                        <div class="coinsNum">Store</div>
                        
                    </div>
                </div>
            </div>
            <img :src="add_recipetitle" style="margin-top: 10px;width: 122px;">
            <div class="inName">
                <van-field maxlength="34" v-model="recipeTitle" placeholder="Type your recipe name here" style="width: 95%;height: 90%;background: #EDEFEE;font-size: 16px;"/>
            </div>
            <img :src="add_coverimage" style="width: 167px;"/>
            <div class="pushImage">
                <div v-if="baseImage" class="haveImage">
                    <img :src="baseImage" style="width: 100%;height: 100%;"/>
                    <div class="close" @click="baseImage = ''">
                        <img :src="close" style="width: 14px;"/>
                    </div>
                </div>
                <div v-else class="noimage" @click="pushImage">
                    <img :src="image" style="width: 30px;margin: 20px 0 10px;" />
                    <div>Add Cover Image</div>
                </div>
            </div>
            <img :src="add_ingredients" style="width: 118px;"/>
            <div class="addList" ref="addList">
                <div v-if="ingredientsList.length>0" class="listShow">
                    <div class="haveIng noNew" style="margin-bottom: 5px;" v-for="(item, index) in ingredientsList" :key="index">
                        <div style="word-wrap: break-word;width: 50%;">{{ item.name }}</div>
                        <div style="display: flex;align-items: center;word-wrap: break-word;width: 50%;justify-content: space-between;">{{ item.num }}<img :src="delete_icon" style="width: 20px;margin-left: 10px;z-index: 99;" @click="deleteItem(index)"/></div>
                    </div>
                </div>
                <div class="addIng" v-if="!addNew" @click="addNew = true">
                    <div class="noNew" >
                        <div>Add Ingredients</div>
                        <img :src="add" style="width: 15px;"/>
                    </div>
                </div>
                <div class="addIng" v-else>
                    <div class="noNew" >
                        <van-field maxlength="25" v-model="ingredients.name" placeholder="Name" style="width: 40%;font-size: 16px;"/>
                        <van-field maxlength="10" v-model="ingredients.num" placeholder="Quantity" style="width: 40%;font-size: 16px;"/>
                        <div class="queding" @click="pushData">
                            <img :src="yes" width="60%"/>
                        </div>
                    </div>
                </div>
            </div>
            <img :src="done_default_button"  style="width: 80%;margin: 0 auto;" @click="sumbit"/>
        </div>
    </div>
    <MeanBar />
</template>
<script setup>
import MeanBar from '../component/MeanBar.vue'
import home_collect_button from '../assets/home_collect_button.png'
import home_store_button from '../assets/home_store_button.png'
import CreateRecipe from '../assets/CreateRecipe.png'
import add_recipetitle from '../assets/add_recipetitle.png'
import add_coverimage from '../assets/add_coverimage.png'
import image from '../assets/image.png'
import close from '../assets/close.png'
import add from '../assets/add.png'
import add_ingredients from '../assets/add_ingredients.png'
import done_default_button from '../assets/done_default_button.png'
import delete_icon from '../assets/delete_icon.png'
import yes from '../assets/yes.png'
import { nextTick, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router';
import { showToast, showConfirmDialog } from 'vant';
const router = useRouter()
const addList = ref(null)
const badgeNum = ref(0)
const recipeTitle = ref('')
const baseImage = ref('')
const ingredientsList = ref([])
const addNew = ref(false)
const ingredients = ref({name: '', num: ''})

const pushImage = () => {
    window['picture'] = (data)=>{
		baseImage.value = data
	}
	window['send'](`terms://photo?type=${0}`);
}
const pushData = () => {
    if (!ingredients.value.name || !ingredients.value.num) {
        showToast("Please enter the name and quantity of the ingredient")
        return
    }
    let dataList = ingredientsList.value
    let data = {name: ingredients.value.name, num: ingredients.value.num}
    dataList.push(data)
    ingredientsList.value = dataList
    ingredients.value = {name: '', num: ''}
    addNew.value = false
    nextTick(() => {
        addList.value.scrollTop = addList.value.scrollHeight
    })
}
const deleteItem = (index) => {
    console.log(index);
    let data = ingredientsList.value
    data.splice(index, 1)
    ingredientsList.value = data
}
const sumbit = () => {
    if (!recipeTitle.value) {
        showToast('Please fill in the name')
        return
    }
    // if (!baseImage.value) {
    //     showToast('Please upload pictures')
    //     return
    // }
    if (ingredientsList.value.length <= 0) {
        showToast('Please fill in the ingredients')
        return
    }
    showConfirmDialog({
          message: 'Are you sure to submit',
          confirmButtonText: 'Confirm',
          cancelButtonText: 'Cancel'
        }).then(() => {
            done()
        })
}
const done = () => {
    let data = {
        name: recipeTitle.value,
        img: baseImage.value,
        ingredients: ingredientsList.value
    }
    try {
        let recipeList = localStorage.getItem('recipeList') ? JSON.parse(localStorage.getItem('recipeList')) : []
        localStorage.setItem('recipeList', JSON.stringify([data, ...recipeList]))
        reset()
        getNum()
    }catch{
        showToast('Please delete some records or replace them with a smaller image')
    }

}
const reset = () => {
    recipeTitle.value = ''
    baseImage.value = ''
    ingredientsList.value = []
    addNew.value = false
    ingredients.value = {name: '', num: ''}
}
const getNum = () => {
    let recipeList = localStorage.getItem('recipeList') ? JSON.parse(localStorage.getItem('recipeList')) : []
    let num1 = recipeList.length
    let recipeXT =  JSON.parse(localStorage.getItem('recipeXT'))
    let num2 = recipeXT.filter(item => item.collect == 1).length
    badgeNum.value = num1 + num2
}
const coinsNum = ref(0)
onMounted(() => {
    getNum()
    coinsNum.value = localStorage.getItem('CPCoinsNum') ? Number(localStorage.getItem('CPCoinsNum')) : 0
})
</script>
<style scoped>
.tip1 {
    margin-top: 40px;
    width: 100%;
    font-weight: 500;
    font-size: 14px;
    color: #737373;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.topInfo {
    display: flex;
}
.coinsNum {
    position: absolute;
    top: 50%;
    /* left: 46px; */
    right: 8px;
    /* right: 5px; */
    transform: translateY(-50%);
    color: #fff;
    font-size: 13px;
}
.inName {
    width: 332px;
    height: 6vh;
    background: #EDEFEE;
    border-radius: 23px 23px 23px 23px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.pushImage {
    width: 25vw;
    height: 25vw;
    border-radius: 17px 17px 17px 17px;
    border: 1px dashed #AFB8C5;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.noimage {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
    font-size: 10px;
    color: #777D86;
    white-space: nowrap;
}
.haveImage {
    width: 80%;
    height: 80%;
    position: relative;
}
.close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 21px;
    height: 21px;
    background: #472A2A;
    opacity: 0.8;
    border-radius: 21px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.addList {
    max-height: 20vh;
    overflow: auto;
    /* background-color: pink; */
    margin-bottom: 10px;
}
.addIng {
    width: 332px;
    height: 51px;
    background: #EDEFEE;
    border-radius: 29px 29px 29px 29px;
    padding: 0 32px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    font-size: 16px;
    color: #013F4E;
}
.haveIng {
    width: 332px;
    height: 51px;
    background: #fff;
    border-radius: 29px 29px 29px 29px;
    border: 2px solid #EDEFEE;
    padding: 0 32px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    font-size: 16px;
    color: #013F4E;
}
.noNew {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.queding {
    width: 38px;
    height: 38px;
    border-radius: 38px;
    background-color: #013F4E;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>